<template>
  <div class="dashboard-container">
    <el-carousel id="ppt" height="500px">
      <el-carousel-item v-for="(news, index) in newsList" :key="index">
        <a v-bind:href=getUrl(news.id)>
          <img :src=news.cover>
        </a>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getNews } from '@/api/news'

export default {
  name: 'Home',
  data() {
    return {
      nowDate: this.dateFormat('YYYY-mm-dd HH:MM', new Date()),
      newsList: []
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  created() {
    const pageParam = {
      current: 1,
      size: 4
    }
    this.getNews(pageParam)
  },
  methods: {
    getNews(params) {
      getNews(params).then(response => {
        this.newsList = response.content.records
      })
    },
    onAddNews() {
      console.log('open add page')
      window.open('http://114.132.200.186/#/news/add', '_blank')
    },
    getUrl(id) {
      const host = location.host
      console.log(host)
      return 'http://' + host + '/#/news/' + id
    },
    dateFormat(fmt, date) {
      let ret
      const opt = {
        'Y+': date.getFullYear().toString(), // 年
        'm+': (date.getMonth() + 1).toString(), // 月
        'd+': date.getDate().toString(), // 日
        'H+': date.getHours().toString(), // 时
        'M+': date.getMinutes().toString(), // 分
        'S+': date.getSeconds().toString() // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      }
      for (const k in opt) {
        ret = new RegExp('(' + k + ')').exec(fmt)
        if (ret) {
          fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, '0')))
        }
      }
      return fmt
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/semantic.css';
.dashboard {
  &-container {
    margin: 30px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
 .el-carousel {
   width: 1100px !important;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

img {
  height: 100%;
  width: 100%;
}
</style>
